<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单动态列表</title>
    <style>
        #load-more-button {
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 20px auto;
            display: block;
        }
        #posts-container p {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <h1>最新动态</h1>
    <div id="posts-container"></div>
    <button id="load-more-button">加载更多</button>

    <script>
        // 使用你提供的 Fetch 函数
        async function Fetch(url, method = 'GET', data = {}, onResponse = () => {}) {
            method = method.toUpperCase();
            const options = {
                method,
                headers: {
                    'Content-Type': 'application/json',
                },
            };

            if (method !== 'GET') {
                options.body = JSON.stringify(data);
            } else {
                if (Object.keys(data).length > 0) {
                    const query = new URLSearchParams(data).toString();
                    url += (url.includes('?') ? '&' : '?') + query;
                }
            }

            try {
                const response = await fetch(url, options);
                const json = await response.json();
                onResponse(json);
                return json.data;
            } catch (error) {
                console.error('网络请求失败:', error);
                const json = {
                    status: 'fail',
                    msg: '网络请求失败',
                    data: {},
                };
                onResponse(json);
                return json.data;
            }
        }

        // 分页功能实现
        let offset = 0;
        const postsContainer = document.getElementById('posts-container');
        const loadMoreBtn = document.getElementById('load-more-button');

        // 加载数据函数
        function loadData() {
            Fetch('{{ url_for('postslistbymyfollowing') }}', 'get', {
                'offset': offset,
                'desc': false,
                'limit': 5
            }, res => {
                console.log('响应数据:', res);
                if (res.status === 'success') {
                    if (Array.isArray(res.data.blogs)) {
                        res.data.blogs.forEach(blog => {
                            if (blog.title) {
                                postsContainer.innerHTML += `<p>${blog.title}</p>`;
                            }
                        });
                        offset;
                    }
                }
            });
        }

        // 初始加载一次
        loadData();

        // 点击按钮加载
        loadMoreBtn.addEventListener('click', loadData);
    </script>
</body>
</html>